import { Tooltip, Button, Menu, Icon, Dropdown, Avatar, message } from 'antd';
import React, { useState, useCallback } from 'react';

import { LogoutOutlined, CaretDownOutlined } from '@ant-design/icons';
import styles from './index.less';
import { updateDutyState, logOut } from '@/services/index';

import Setting from './Setting';
import PersonCard from './profile/index';
import PersonEdit from './profile/editPerson';
import { useRequest } from '@umijs/hooks';
import manAvatar from '@/assets/avatar/default-avatar-man.png';
import womanAvatar from '@/assets/avatar/default-avatar-woman.png';

const GlobalHeaderRight = props => {
  const { theme, layout, currentUser, getUser, currentUserLoading } = props;
  let className = styles.right;

  if (theme === 'dark' && layout === 'topmenu') {
    className = `${styles.right}  ${styles.dark}`;
  }
  const [isFirstLogin, setIsFirstLogin] = useState(localStorage.getItem('isFirstLogin') === '1');

  const [passwordSettingVisible, setPasswordSettingVisible] = useState(isFirstLogin); // 用户设置
  const [personCardVisible, setPersonCardVisible] = useState(false); // 个人卡片
  const [personEditVisible, setPersonEditVisible] = useState(false); // 个人编辑
  /**
   *
   * @param {onDutyState} 值班状态
   */
  const changeDutyState = () => {
    let dutyState = '';
    if (currentUser.isOnDuty === 0) {
      dutyState = 1;
    } else {
      dutyState = 0;
    }
    updateDutyState({ onDutyState: dutyState }).then(res => {
      getUser();
    });
  };

  const onSetSuccess = useCallback(() => {
    if (isFirstLogin) {
      setIsFirstLogin(false);
      localStorage.setItem('isFirstLogin', 0);
    }
  }, [isFirstLogin]);

  const { run: runLogout, loading } = useRequest(logOut, {
    manual: true,
    onSuccess() {
      localStorage.clear();
      window.location.href = '/user/login';
    },
    onError() {
      message.error('退出失败,请重试！');
    },
  });

  const menu = (
    <Menu className={styles.menu} selectedKeys={[]}>
      <Menu.Item
        key="center"
        onClick={() => {
          setPersonCardVisible(true);
        }}
      >
        <Icon type="user" />
        个人中心
      </Menu.Item>
      {/* 暂时屏蔽用户设置 */}
      {/* <Menu.Divider />
      <Menu.Item key="settings" onClick={() => setPasswordSettingVisible(true)}>
        <Icon type="setting" />
        用户设置
      </Menu.Item> */}
    </Menu>
  );

  return (
    <div className={className}>
      {/* 用户设置 */}
      <Setting
        onSetSuccess={onSetSuccess}
        closable={!isFirstLogin}
        onClose={() => setPasswordSettingVisible(false)}
        visible={passwordSettingVisible}
      />
      {/* 个人资料 */}
      <PersonCard
        currentUser={currentUser}
        currentUserLoading={currentUserLoading}
        onClose={() => setPersonCardVisible(false)}
        onEdit={() => {
          setPersonCardVisible(false);
          setPersonEditVisible(true);
        }}
        visible={personCardVisible}
      />
      {/* 编辑个人资料 */}
      <PersonEdit
        currentUser={currentUser}
        currentUserLoading={currentUserLoading}
        onClose={() => setPersonEditVisible(false)}
        onSubmit={res => {
          console.log(res);
        }}
        fr
        visible={personEditVisible}
      />
      <Button type="link" style={{ cursor: 'default', padding: '0' }}>
        {currentUser ? currentUser.airport : ''}
      </Button>
      <Dropdown overlay={menu}>
        <Button type="link" style={{ padding: '0' }}>
          <span className={`${styles.action} ${styles.account}`}>
            {/* <Avatar
              shape="avatar"
              size="small"
              icon={currentUser.photo ? false : 'user'}
              src={currentUser.photo ? `data:image/png;base64,${currentUser.photo}` : false}
            /> */}
            {
              currentUser.photo
                ? <Avatar shape="avatar" size="small"  src={`data:image/png;base64,${currentUser.photo}`} />
                : <Avatar shape="avatar" size="small"   src={currentUser.tuSex === '0' ? womanAvatar : manAvatar} />
              }
            <span className={styles.name}>
              {' '}
              {currentUser.tuCname}
              <CaretDownOutlined style={{ fontSize: 12 }} />
            </span>
          </span>
        </Button>
      </Dropdown>
      {currentUser ? (
        <Button
          type="link"
          style={{ padding: '0', marginRight: '15px' }}
          onClick={() => {
            changeDutyState();
          }}
        >
          {' '}
          {currentUser.isOnDuty === 1 ? '解除值班' : '设置值班'}
        </Button>
      ) : (
        ''
      )}
      |
      <Tooltip title="退出系统">
        <Button type="link" loading={loading} onClick={() => runLogout()}>
          <LogoutOutlined />
        </Button>
      </Tooltip>
      <span>&nbsp;</span>
    </div>
  );
};

export default GlobalHeaderRight;
